<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .image-show{
        width: 210px;
        height:210px;
    }
    .css-xnjket {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99999998;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.498039);
    display: none;
}
.css-xnjket canvas{
    width:1000px;
    margin: 30px auto;
}
    </style>
</head>

<body>
   <div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
    <input type="text" value="123" />
    <button>btn</button>
    <code>hello world</code>
  <article>
    ![](./texture5.jpg)
  </article>
    <img width="400px" src="" alt="title"/>
</div>
    <button onClick=btnClick()>click me</button>
    <script type="text/javascript" src="./js/html2canvas.js"></script>
    <script type="text/javascript">
   function  btnClick(){
       console.log('c')
       
    //     html2canvas(document.querySelector("#capture")).then(canvas => {
    //         var url = canvas.toDataURL('./images/texture5.jpg')
    // document.body.appendChild(canvas)
   
    // });
    html2canvas(document.querySelector("#capture"), {
  onrendered: function(canvas) {
    var url = canvas.toDataURL();//图片地址
    document.body.appendChild(canvas);
  },
//   width: 300,
});
    }
      

    </script>
</body>

</html>